<template>
	<div class="section miniFooterBg" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
		@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
		:style=" 'height:' +sectionHeight + 'px;' ">
		<div class="bg_logo"></div>
		<div class="footerArea">
			<div class="homeFooterArea">
				<div class="homeContainer">
					<el-row class="miniLogo">
						<el-col :span="24">
							<div class="gttgLogo"></div>

						</el-col>
						<el-col :span="24">
							<div class="gttgQr"></div>
						</el-col>
						<el-col :span="24">
							<el-row>
								<el-col :span="6" v-for="(item,index) in menus" :key="index">
									<div @click="goToChildPage(item.name)" class="f_menu">{{item.name}}</div>
									<div @click="goToChildPage(child.name)" class="f_child"
										v-for="(child,childIndex) in item.childMenu" :key="'childMenu_'+childIndex">
										{{child.name}}
									</div>
								</el-col>
							</el-row>
						</el-col>

					</el-row>
				</div>
				<el-row class="homeCopyright">
					<el-col :span="24">
						<div class="homeCopyrightText">
							{{$t("icpContet")}}
						</div>
					</el-col>
				</el-row>
			</div>

		</div>
	</div>
</template>

<script>
	import {
		//党建引领
		partyBuildingLeads,
		//企业概况
		corporateOverviewMenu,
		//企业新闻
		corporateNews,
		//产品与服务
		productsAndServicesMenu,
		//可持续发展
		csustainableDevelopmentMenu,
		//采购信息
		procurementInformationMenu,
		//人才中心
		centreOfExcellenceFooterMenu,
		//联系我们
		contactUsMenu
	} from '../../../src/utils/menu.js'
	export default {
		name: 'HomeFooter',
		props: {
			sectionHeight: Number
		},
		components: {},
		created() {

		},
		mounted() {

			// this.getMenuList();
		},
		data() {
			return {
				newsSlides: [{
						type: "img",
						url: 'https://pic.616pic.com/bg_w1180/00/23/67/prTnXI09Gv.jpg'
					},
					{
						type: "img",
						url: 'https://pic.616pic.com/bg_w1180/00/23/67/prTnXI09Gv.jpg'
					},
					{
						type: "img",
						url: 'https://pic.616pic.com/bg_w1180/00/23/67/prTnXI09Gv.jpg'
					},
				],
				menus: [{
						name: this.$t('aboutGTTG'),
						menuIndex: 1,
						childMenu: corporateOverviewMenu
					}, {
						name: this.$t('partyBuildingLeads'), //党建资讯
						menuIndex: 2,
						childMenu: partyBuildingLeads
					},
					{
						name: this.$t('corporateNews'), //企业新闻
						menuIndex: 4,
						childMenu: corporateNews
					},
					{
						name: this.$t('productsAndServices'), //"产品与服务",
						menuIndex: 5,
						childMenu: productsAndServicesMenu
					},
					{
						name: this.$t('sustainableDevelopment'), // "可持续发展",
						menuIndex: 6,
						childMenu: csustainableDevelopmentMenu
					},
					{
						name: this.$t('BiddingProcurement'), //"招标采购",
						menuIndex: 7,
						childMenu: procurementInformationMenu
					},
					{
						name: this.$t('centreOfExcellence'), // "人才中心",
						menuIndex: 8,
						childMenu: centreOfExcellenceFooterMenu
					},
					{
						name: this.$t('contactUs'), //"联系我们",
						menuIndex: 9,
						childMenu: contactUsMenu
					},
				]
			}
		},
		methods: {
			initBannerSwiper() {
				let that = this;
				that.swiper = new Swiper(that.$refs.newsSwiper, {

					direction: 'horizontal',
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 0,
					effect: 'slide',
					lazy: {
						loadPrevNext: true,
					},
					pagination: {
						el: that.$refs.newsSwiperPagination,
						type: 'bullets',
						clickable: true
					},
					autoplay: {
						delay: 4000,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					},

				});
				that.swiper.on('slideNextTransitionStart', function() {
					var activeIndex = that.swiper.activeIndex;


					console.log("开始切换" + activeIndex);
				});
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------开始----------*/
			handleMouseDown(event) {
				this.startY = event.clientY;
				this.deltaY = 0;
				this.isDragging = true;
			},
			handleMouseMove(event) {
				if (this.isDragging) {
					const currentY = event.clientY;
					this.deltaY = currentY - this.startY;
				}
			},
			handleMouseUp() {
				if (Math.abs(this.deltaY) > 30) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
				this.isDragging = false;
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------结束----------*/
			/*-----------------------------处理----手指上下滑动--------------------开始----------*/
			handleTouchStart(event) {
				this.startY = event.touches[0].clientY;
				this.deltaY = 0;
			},
			handleTouchMove(event) {
				const currentY = event.touches[0].clientY;
				this.deltaY = currentY - this.startY;
			},
			handleTouchEnd() {
				if (Math.abs(this.deltaY) > 10) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
			},
			goToChildPage(name) {
				let recruitmentQuery = {};
				if (name == this.$t("socialRecruitment")) {
					name = this.$t("recruitmentInformation");
					recruitmentQuery = {
						menuActiveIndex: 0
					}
				}
				if (name == this.$t("campusRecruitment")) {
					name = this.$t("recruitmentInformation");
					recruitmentQuery = {
						menuActiveIndex: 1
					}
				}
				this.$router.push({
					name: name,
					query: recruitmentQuery
				});
			},

		},
		beforeDestroy() {

		},
		watch: {

		}
	};
</script>

<style scoped>
	/* 企业实时新闻 */
	.miniFooterBg {
		width: 100%;
		height: 100%;
		/* background: url("../../assets/img/bg_news.jpg") no-repeat; */
		background-size: cover;
		background-position: center;
		cursor: pointer;
		padding-top: 50px;
		background-color: #1a2330;
		position: relative;
	}

	.bg_logo {
		width: 1920px;
		height: 800px;
		position: absolute;
		top: -40px;
		z-index: 1;
		background: url("../../assets/img/bg_home_footer.jpg") no-repeat;
		background-size: 1280px 540px;
		background-position: center;
	}


	.footerArea {
		width: 80%;
		height: 100%;
		padding: 70px 0px 0px 0px;
		position: absolute;
		z-index: 999;
	}

	.homeFooterArea {
		height: 100%;
		width: 100%;
		position: relative;
		background: none;
	}

	.homeContainer {
		width: 100%
	}

	.gttgLogo {
		height: 50px;
		width: 138px;
		background: url("../../assets/img/gttg_foot_logo.png") no-repeat;
		background-position: center;
		background-size: 138px 50px;
		margin-top: 12px;
		margin: auto;
	}

	.address {
		height: 40px;
		line-height: 40px;
		width: 500px;
		margin: 10px 0px;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		position: relative;
		margin: 0 auto;
	}

	.icon_position {
		height: 30px;
		line-height: 30px;
		background: url("../../assets/icons/icon_position.png") no-repeat;
		background-position: left;
		background-size: 20px;
		position: absolute;
		left: -30px;
	}

	.f_menu {
		height: 40px;
		line-height: 20px;
		font-size: 14px;
		color: #FFF;
		cursor: pointer;
		padding-left: 20px;
		font-weight: 400;
		text-align: center;
	}

	.f_child {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		cursor: pointer;
		padding-left: 20px;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.28;
		text-align: center;
	}

	.f_child:hover {
		opacity: 1;
	}

	.homeCopyright {
		height: 40px;
		/* 	line-height: 50px; */
		width: 100%;
		border-top: 1px solid #515a6e;
		position: absolute;
		bottom: 1px;
	}

	.homeCopyrightText {
		width: 100%;
		text-align: center;
		height: 40px;
		line-height: 20px;
		font-weight: 500;
		color: #415466;
		font-size: 14px;
	}

	.gttgQr {
		height: 100px;
		width: 100px;
		background: url("../../assets/img/gttg_qr.jpg") no-repeat;
		background-position: center;
		background-size: cover;
		margin-top: 12px;
		margin: auto;
		margin-bottom: 20px;
	}



	@media (min-width: 1680px) {
		.homeFooterArea {
			height: 95%;
			width: 100%;
			position: relative;
			background: none;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bg_logo {
			width: 1920;
			height: 800px;
			position: absolute;
			top: 20%;
			z-index: 1;
			background: url(/img/bg_home_footer.6003e26f.jpg) no-repeat;
			background-size: 1920px 768px;
			background-position: center;
		}

		.gttgLogo {
			height: 100px;
			width: 138px;
			background: url(/img/gttg_foot_logo.1b24af20.png) no-repeat;
			background-position: center;
			background-size: 138px 50px;
			margin-top: 12px;
			margin: auto;
		}

		.footerArea {
			width: 80%;
			height: 100%;
			padding-top: 0px;
			position: absolute;
			z-index: 999;
		}

		.address {
			height: 100px;
			line-height: 100px;
			width: 500px;
			margin: 10px 0px;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			position: relative;
			margin: 0 auto;
		}

		.gttgQr {
			height: 100px;
			width: 100px;
			background: url(/img/gttg_qr.7ee2fdb6.png) no-repeat;
			background-position: center;
			background-size: cover;
			margin: auto;
			margin-bottom: 50px;
		}

		.f_child {
			height: 40px;
			line-height: 40px;
			font-size: .9em;
			cursor: pointer;
			padding-left: 20px;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.28;
			text-align: center;
		}

		.homeCopyrightText {
			width: 100%;
			text-align: center;
			height: 100px;
			line-height: 100px;
			font-weight: 500;
			color: #415466;
			font-size: 12px;
		}
	}

	@media (max-width: 768px) {
		.gttgQr {
			margin-top: 10px;
		}

		.address {
			height: 100px;
			line-height: 100px;
			width: 400px;
			margin: 10px 0px;
			font-weight: 400;
			font-size: 0.8em;
			color: #FFFFFF;
			text-align: center;
			position: relative;
			margin: 0 auto;
		}

		.f_menu {
			height: 40px;
			line-height: 20px;
			font-size: 14px;
			color: #FFF;
			cursor: pointer;
			font-weight: 400;
			padding: 0px;
			text-align: center;
		}

		.f_child {
			height: 24px !important;
			line-height: 18px !important;
			font-size: 12px;
			cursor: pointer;
			padding: 0px !important;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.28;
			text-align: center;
		}

		.miniFooterBg {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			cursor: pointer;
			padding-top: 0px;
			background-color: #1a2330;
			position: relative;
		}
		.footerArea {
			width: 80%;
			height: 100%;
			padding: 50px 0px 0px 0px;
			position: absolute;
			z-index: 999;
		}
	}
</style>
